<script>
import { mapState } from 'vuex'
import InstitutionSelect from '@/components/institutionSelect/institutionSelect.vue'

export default {
  name: 'carRegister',
  components: { InstitutionSelect },
  data() {
    return {
      pageParams: {
        // 当前页
        page: 1,
        // 一页多少条数据
        pageSize: 10,
        // 车辆是否可用
        isAvailable: '',
        // 运输任务id
        transportTaskId: '',
        // 开始回车时间
        intoStorageStartTime: '',
        // 结束回车时间
        intoStorageEndTime: '',
        // 结束机构ID
        endAgencyId: '',
        // 起始机构ID
        startAgencyId: ''
      },
      timeArray: [],
      loading: false,
      institutionStartPlaceholder: '请选择起始地机构',
      institutionEndPlaceholder: '请选择目的地地机构'

    }
  },
  methods: {
    /*
    * 分页查询回车登记列表的回调函数
    *  */
    async fetchCarRegisterList() {
      try {
        this.loading = true
        await this.$store.dispatch('carRegisterStore/fetchCarRegisterListAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /*
    *pageSize发生变化的回调函数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchCarRegisterList()
    },
    /*
    *page发生变化的回调函数
    *  */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchCarRegisterList()
    },
    /*
    *
    * 点击搜索按钮的回调函数
    *  */
    handleSearch() {
      this.pageParams.page = 1
      const [intoStorageStartTime, intoStorageEndTime] = this.timeArray
      this.pageParams.intoStorageStartTime = intoStorageStartTime
      this.pageParams.intoStorageEndTime = intoStorageEndTime
      this.fetchCarRegisterList()
    },
    /*
    * 点击搜索按钮的回调函数
    *  */
    handleReset() {
      this.pageParams.page = 1
      this.pageParams.isAvailable = null
      this.pageParams.endAgencyId = ''
      this.pageParams.intoStorageStartTime = ''
      this.pageParams.intoStorageEndTime = ''
      this.pageParams.endAgencyId = ''
      this.pageParams.startAgencyId = ''
      this.timeArray=[]
      this.fetchCarRegisterList()
    },
    /*
    * 点击查看按钮的回调函数
    *  */
    handleShow(row) {
      this.$router.push({ path: '/show-reg', query: { id: row.id } })
    },
    /*
    *
    *  */
    clickStart({ id, name }) {
      this.pageParams.startAgencyId = id
      this.institutionStartPlaceholder = name
    },
    clickEnd({ id, name }) {
      this.pageParams.endAgencyId = id
      this.institutionEndPlaceholder = name
    }
  },
  computed: {
    ...mapState('carRegisterStore', ['carRegisterList', 'counts'])
  },
  mounted() {
    this.fetchCarRegisterList()
  }
}
</script>

<template>
  <div class="car-register">
    <el-card class="top" shadow="never">
      <el-form inline label-width="120px">
        <el-form-item label="运输任务编号:">
          <el-input placeholder="请输入运输任务编号" v-model="pageParams.transportTaskId"></el-input>
        </el-form-item>
        <el-form-item label="起始地机构:">
          <institution-select :placeholder="institutionStartPlaceholder" @nodeClick="clickStart"></institution-select>
        </el-form-item>
        <el-form-item label="目的地机构:">
          <institution-select :placeholder="institutionEndPlaceholder" @nodeClick="clickEnd"></institution-select>
        </el-form-item>
        <el-form-item label="回车时间:">
          <el-date-picker  value-format="yyyy-MM-dd hh:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="timeArray"></el-date-picker>
        </el-form-item>
        <el-form-item label="车辆是否可用:">
          <el-select v-model="pageParams.isAvailable">
            <el-option :value="undefined" label="全部"></el-option>
            <el-option :value="true" label="可用"></el-option>
            <el-option :value="false" label="不可用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="bottom" shadow="never" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-table border stripe :data="carRegisterList" :header-cell-style="{background:'#f4f6f8',color:'#969393'}">
        <el-table-column label="任务编号" prop="transportTaskId" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="起始机构" prop="startAgencyName" align="center"></el-table-column>
        <el-table-column label="目的机构" prop="endAgencyName" align="center"></el-table-column>
        <el-table-column label="运单数量" prop="transportOrderNumber" align="center"></el-table-column>
        <el-table-column label="出车时间" prop="outStorageTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="回车时间" prop="intoStorageTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="车牌号" prop="licensePlate" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{row}">
            {{ row.isAvailable ? '可用' : '不可用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleShow(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" background></el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.car-register {
  padding: 20px;

  .top {
    .el-form-item {
      width: 400px;

      .el-select {
        width: 130%;
      }

      .el-input {
        width: 130%;
      }

      .el-date-editor {
        width: 246px;
      }
    }
  }

  .bottom {
    margin-top: 20px;

    .el-table {
      margin-bottom: 10px;
    }

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
